<template>
  <div class="corpPaper">
    <header class="table-header">
      <p>试题管理</p>
      <div class="search-container">
        <Select
          width="195px"
          v-model="queType"
          placeholder="题目类型">
          <Option
            v-for="t of queTypes"
            :key="t.value"
            :value="t.value">
              {{ t.label }}
          </Option>
        </Select>
        <Select
          width="195px"
          v-model="queDiff"
          placeholder="难度">
          <Option
            v-for="t of queDiffs"
            :key="t.value"
            :value="t.value">
              {{ t.label }}
          </Option>
        </Select>
        <input v-model="queName" type="text" placeholder="题目名称">
        <div class="btn primary" style="margin-right:10px" @click="queryBQuestions">搜索</div>
        <div class="btn primary" @click="addQueShow = true">添加题目</div>
      </div>
    </header>
    <main>
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th style="text-align:left;padding-left:60px">题目名称</th>
            <th>题目类型</th>
            <th>题目难度</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="que of queData">
            <tr :key="que.id">
              <td class="expend">
                <img @click="expend($event)" src="@/assets/img/u4210.png"/>
              </td>
              <td style="text-align:left;padding-left:60px">{{ que.name }}</td>
              <td style="width:120px">{{ getType(que.queType) }}</td>
              <td style="width:120px">{{ getDifficulty(que.difficulty) }}</td>
              <td style="width:120px">
                <a @click="modifyQueClicked(que)">修改</a>
                <a @click="deleteQue(que.id)">删除</a>
              </td>
            </tr>
            <tr style="display:none" :key="que.id + 99999">
              <td class="middle" colspan="5">
                <div class="middle-container">
                  <div class="box">
                    <p class="title">题目名称</p>
                    {{ que.name }}
                    <p class="title">题目描述</p>
                    {{ que.desc || '无' }}
                  </div>
                  <div class="box" v-if="que.queType !== 2">
                    <p class="title">选项</p>
                    <div class="que-container">
                      <div class="row">
                        <div class="option-container A">
                          {{ que.options.A }}
                        </div>
                        <div class="option-container B">
                          {{ que.options.B }}
                        </div>
                      </div>
                      <div class="row">
                        <div class="option-container C">
                          {{ que.options.C }}
                        </div>
                        <div class="option-container D">
                          {{ que.options.D }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box">
                    <p class="title">题目类型</p>
                    {{ getType(que.queType) }}
                    <template v-if="que.queType !== 2">
                      <p class="title">答案</p>
                      {{ que.queAns }}
                    </template>
                    <template v-else>
                      <p class="title">答案</p>
                      {{ que.queAns === 0 ? '正确' : '错误' }}
                    </template>
                  </div>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </main>
    <Que
      @close="modifyQueShow = false"
      @done="modifyQue"
      :dialogData="modifyQueData"
      title="修改题目信息"
      :show="modifyQueShow"
    ></Que>
    <Que
      @close="addQueShow = false"
      @done="addQue"
      :dialogData="modifyQueAddData"
      title="增加题目信息"
      :show="addQueShow"
    ></Que>
  </div>
</template>
<script>
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import Que from '@/components/Dialogs/modifyQue';
// eslint-disable-next-line camelcase
import api_questionMgn from '@/api/questionMgn';

export default {
  name: 'questionMgn',
  data() {
    return {
      queData: [
      ],
      // 检索条件
      queTypes: [
        {
          value: 0,
          label: '单选题',
        },
        {
          value: 1,
          label: '多选题',
        },
        {
          value: 2,
          label: '判断题',
        },
      ],
      queDiffs: [
        {
          value: 0,
          label: '非常简单',
        },
        {
          value: 1,
          label: '较简单',
        },
        {
          value: 2,
          label: '普通',
        },
        {
          value: 3,
          label: '困难',
        },
        {
          value: 4,
          label: '极其困难',
        },
      ],
      queName: '',
      queType: '',
      queDiff: '',

      addQueShow: false,
      modifyQueShow: false,
      modifyQueData: null,
      modifyQueAddData: null,
    };
  },
  mounted() {
    this.$emit('route-switch', window.location.href.split('/').pop());
    this.queryBQuestions();
  },
  methods: {
    async queryBQuestions() {
      this.queData = [];
      const param = new URLSearchParams();
      param.append('level', this.queDiff);
      param.append('title', this.queName);
      param.append('type', this.queType);
      param.append('companyId', sessionStorage.getItem('companyId'));
      api_questionMgn.queryBQuestions(param).then(async (res) => {
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          if (datas[i].optionList.length === 0) {
            this.queData.push({
              id: datas[i].questionId,
              name: datas[i].questionTitle,
              queType: parseInt(datas[i].questionType, 10),
              difficulty: parseInt(datas[i].questionLevel, 10),
              desc: datas[i].questionDescription,
              options: {
                A: '',
                B: '',
                C: '',
                D: '',
              },
              queAns: datas[i].questionAnswer,
            });
          } else {
            this.queData.push({
              id: datas[i].questionId,
              name: datas[i].questionTitle,
              queType: parseInt(datas[i].questionType, 10),
              difficulty: parseInt(datas[i].questionLevel, 10),
              desc: datas[i].questionDescription,
              options: {
                A: datas[i].optionList[0].optionContent,
                B: datas[i].optionList[1].optionContent,
                C: datas[i].optionList[2].optionContent,
                D: datas[i].optionList[3].optionContent,
              },
              // options: datas[i].optionList,
              queAns: datas[i].questionAnswer,
            });
          }
        }
      });
    },
    expend(e) {
      if (e.currentTarget.className === '') {
        e.currentTarget.className = 'rotate';
      } else {
        e.currentTarget.className = '';
      }
      const display = e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display;
      if (display === 'none') {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = '';
      } else {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = 'none';
      }
      this.geminiScrollbar_left.update();
    },

    deleteQue(id) {
      this.$confirm('确定要删除该题目吗？', (response) => {
        if (response) {
          api_questionMgn.deleteBQuestions(id).then(async (res) => {
            if (res.data.code === 200) {
              this.$alert('操作成功');
              this.queryBQuestions();
            } else {
              this.$alert(res.data.message);
            }
          });
        }
      });
    },
    getType(type) {
      switch (type) {
        case 0:
          return '单选题';
        case 1:
          return '多选题';
        case 2:
          return '判断题';
        default:
          return null;
      }
    },

    modifyQue(data) {
      const param = new URLSearchParams();
      param.append('level', data.difficulty);
      param.append('title', data.name);
      param.append('description', data.desc);
      param.append('answer', data.ans);
      param.append('type', data.type);
      param.append('options', JSON.stringify(data.options));
      api_questionMgn.updateBQuestions(data.id, param).then(async (res) => {
        if (res.data.code === 200) {
          this.$alert('操作成功');
          this.modifyQueShow = false;
          this.modifyQueData = null;
          this.queryBQuestions();
        } else {
          this.$alert(res.data.message);
        }
      });
    },
    addQue(data) {
      const param = new URLSearchParams();
      param.append('level', data.difficulty);
      param.append('title', data.name);
      param.append('description', data.desc);
      param.append('answer', data.ans);
      param.append('type', data.type);
      param.append('companyId', sessionStorage.getItem('companyId'));
      param.append('options', JSON.stringify(data.options));
      api_questionMgn.addBQuestions(param).then(async (res) => {
        if (res.data.code === 200) {
          this.$alert('操作成功');
          this.addQueShow = false;
          this.modifyQueAddData = null;
          this.queryBQuestions();
        } else {
          this.$alert(res.data.message);
        }
      });
    },
    modifyQueClicked(que) {
      if (que.queType === 1) {
        this.modifyQueData = { ...que, queAns: que.queAns.split(',') };
      } else {
        this.modifyQueData = { ...que };
      }
      this.modifyQueShow = true;
    },
    getDifficulty(type) {
      switch (type) {
        case 0:
          return '非常简单';
        case 1:
          return '较简单';
        case 2:
          return '普通';
        case 3:
          return '困难';
        case 4:
          return '极其困难';
        default:
          return null;
      }
    },
  },
  components: {
    Select,
    Option,
    Que,
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.vars.less);
.corpPaper {
  &>header {
    display: flex;
    .select-box {
      margin: 0;
      margin-right: 10px;
      .select {
        height: 35px;
      }
    }
    input {
      height: 35px;
      margin-right: 10px;
    }
    .search-container {
      flex: 1;
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }
  }
  &>main {
    .middle {
      background: rgba(216, 229, 255, 0.397);
      .middle-container {
        padding: 20px 100px;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        .box {
          width: 30%;
          margin-right: 30px;
          padding: 10px;
        }
        p {
          margin: 10px 0;
        }
        .title, .que-title {
          font-size: 16px;
          font-weight: 600;
          margin-right: 10px;
          position: relative;
          user-select: none;
        }
        .title::before {
          content: "";
          position: absolute;
          width: 3px;
          height: 15px;
          border-radius: 10px;
          background-color: @site-main;
          left: -10px;
          top: 3.5px;
        }
        .que-container {
          // margin-top: 20px;
          .row {
            margin: 10px 0;
            display: flex;
            padding-left: 14px;
            .option-container {
              margin-right: 25px;
              width: 50%;
              position: relative;
              &::before {
                position: absolute;
                color: @site-main;
                left: -17px;
                top: 2px;
                font-size: 16px;
                font-weight: 600;
              }
              &.A::before {
                content: "A";
              }
              &.B::before {
                content: "B";
              }
              &.C::before {
                content: "C";
              }
              &.D::before {
                content: "D";
              }
            }
          }
        }
      }
    }
  }
}
</style>
